<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import axios from 'axios';
import { h } from 'vue'
import { ElNotification } from 'element-plus'
const methods = {
	onSubmit: async () => {
		const { data } = await axios.post('/myapi/api/startssh',{
			"choice" : "main_auth",
			"value" :state.form.victim
		});
		state.mai = data.output.split(':')[1]

		const { data:data2 } = await axios.post('/myapi/api/startssh',{
			"choice" : "backup_auth",
			"value" :state.form.victim
		});
		state.bac = data2.output.split(':')[1]
	},
	onSubmit2: async () => {
		ElNotification({
            title: '提示',
            message: h('i', { style: 'color: teal' }, '任播的测量需要一定时间，请耐心等待1分钟'),
            duration: 0,
        })
		const { data } = await axios.post('/myapi/api/startssh',{
			"choice" : "anycast",
			"value" :state.form.ip
		});
		state.anyc = data.output.split(':')[1]
	}
};

interface UserForm {
	victim: string;
	mod: string;
	ip: string;
}

const state = reactive({
	form: {
		victim: 'baidu.com',
		mod: 'ipv6',
		ip: '8.8.8.8'
	} as UserForm,
    buttonText: '开始攻击',
	buttonStyle: { backgroundColor: ''},
	isAttacking: false,
	amp:"",
	mai: "",
	bac: "",
	anyc: ''
});
</script>

<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }" class="bread">主页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/Detection' }" class="bread">属性感知</el-breadcrumb-item>
			<el-breadcrumb-item class="bread">DNS系统部署架构感知功能测试</el-breadcrumb-item>
		</el-breadcrumb>
	</div>
	<div class="display-flex j-c-c a-i-c height100" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
		<div class="display-flex j-c-c a-i-c height100 ">
			<div class="login-form">
				<h1 class="title">域名输入</h1>
				<el-form :model="state.form">
					<el-form-item prop="email" label="探测的域名">
						<el-input v-model="state.form.victim" placeholder="请输入域名"></el-input>
					</el-form-item>

					<el-form-item class="button-container">
						<el-button class="Mybutton" type="primary" @click="methods.onSubmit"
							:style="{ backgroundColor: state.buttonStyle.backgroundColor }">
							开始探测
						</el-button>
					</el-form-item>
				</el-form>
			</div>

			<div class="Output-form">
				<h1 class="title">探测结果</h1>
				<el-form :model="state.form">
					<el-form-item prop="email" label="主权威服务器">
						<el-input v-model="state.mai" placeholder="" disabled></el-input>
					</el-form-item>
					<el-form-item prop="email" label="辅权威服务器">
						<el-input v-model="state.bac" disabled :rows="15" :autosize="{ minRows: 15, maxRows: 15 }"
							readonly="true" class="OutputBox" type="textarea"></el-input>
					</el-form-item>
				</el-form>
			</div>
		</div>

		<div class="display-flex j-c-c a-i-c height100">
			<div class="login-form">
				<h1 class="title">IP输入</h1>
				<el-form :model="state.form">
					<el-form-item prop="email" label="探测的IP">
						<el-input v-model="state.form.ip" placeholder="请输入IP"></el-input>
					</el-form-item>

					<el-form-item class="button-container">
						<el-button class="Mybutton" type="primary" @click="methods.onSubmit2"
							:style="{ backgroundColor: state.buttonStyle.backgroundColor }">
							开始探测
						</el-button>
					</el-form-item>
				</el-form>
			</div>

			<div class="Output-form1">
				<h1 class="title">探测结果</h1>
				<el-form :model="state.form">
					<el-form-item prop="email" label="支持任播">
						<el-input v-model="state.anyc" disabled :rows="4" :autosize="{ minRows: 4, maxRows: 4 }"
							readonly="true" class="OutputBox" type="textarea"></el-input>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>


<style lang="css" scoped>
.login-form {
	width: 400px;
	height: 180px;
	margin: 0 auto;
	padding: 30px;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	border-radius: 2px;
	box-shadow: 3px 3px 10px 8px #f1f1f1;
}

.Output-form {
	width: 400px;
	height: 450px;
		margin: 0 auto;
		padding: 30px;
		margin-top: 10px;
		
		border-radius: 2px;
		box-shadow: 3px 3px 10px 8px #f1f1f1;
	}
	
	.Output-form1 {
		width: 400px;
		height: 250px;
		margin: 0 auto;
		padding: 30px;
		margin-top: 10px;
	border-radius: 2px;
	box-shadow: 3px 3px 10px 8px #f1f1f1;
}

.code-box {
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
}


.bread {
    font-size: 34px;
}

.Output {
	position: relative;
	margin-top: 10px;
}

.Mybutton {
	text-align: center;
	margin: 0 auto;
	
}

.button-container {
  margin-top: 20px; /* 增加按钮与上方的距离 */
  text-align: center; /* 使按钮居中对齐 */
}
</style>